<template>
  <view class="order-list-container">
    <!-- 顶部标签栏 -->
    <view class="tabs">
      <view class="tab" :class="{ active: currentStatus === 'all' }" @click="changeStatus('all')">全部</view>
      <view class="tab" :class="{ active: currentStatus === '配送中' }" @click="changeStatus('配送中')">进行中</view>
      <view class="tab" :class="{ active: currentStatus === '已完成' }" @click="changeStatus('已完成')">已完成</view>
      <view class="tab" :class="{ active: currentStatus === '已取消' }" @click="changeStatus('已取消')">已取消</view>
    </view>

    <!-- 订单列表 -->
    <view v-if="orders.length > 0">
      <view class="order-list">
        <!-- 订单项 -->
        <view class="order-item" v-for="(order, index) in filteredOrders" :key="index">
			
          <view class="order-header">
            <text class="shop-name">{{ order.shopname }}</text>
            <text class="order-status">{{ getStatusText(order) }}</text>
          </view>
          <view class="order-products">
            <view class="product" v-for="(product, pIndex) in order.products" :key="pIndex">
              <image class="product-image" :src="Config.API_HOST + product.imgUrl" mode="aspectFill"></image>
              <view class="product-info">
                <text class="product-name">{{ product.name }}</text>
              </view>
              <view class="product-price">
                <text class="price">¥{{ product.price }}</text>
                <text class="quantity">x{{ product.quantity }}</text>
              </view>
            </view>
          </view>
          <view class="order-footer">
            <view class="order-total">
              <view >
              	<text class="total-label">共 {{ getTotalItems(order) }} 件</text>
              	<text class="total-price">¥{{ order.totalPrice.toFixed(2) }}元</text>
              </view>
			  <view class="addressname">
			  	<view class="name">收货人：{{order.address.name}}</view>
			  	<button class="btn"
			  	  v-if="order.status === '配送中' && order.showConfirmButton" 
			  	  @click="confirmreceipt(order)"
			  	>
			  	  确认收货
			  	</button>
			  </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-message">
      <text>空空如也</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import Config from "@/config.js";

const orders = ref([]);
const currentStatus = ref('all'); // 存储当前选中的状态

// 计算属性，根据当前状态过滤订单
const filteredOrders = computed(() => {
  if (currentStatus.value === 'all') {
    return orders.value;
  }
  return orders.value.filter(order => {
    const statusText = getStatusText(order);
    return statusText === currentStatus.value;
  });
});

const first = () => {
  const token = uni.getStorageSync('token');
  uni.request({
    url: Config.API_HOST + '/order/?token=' + token,
    success: (res) => {
      const ordersWithDefaultStatus = res.data.map(order => {
        return {
         ...order,
        };
      });
      orders.value = ordersWithDefaultStatus.reverse();
    },
    fail: (error) => {
      console.error('获取订单数据失败:', error);
    }
  });
}
onShow(() => {
  const token = uni.getStorageSync('token');
  if (!token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 2000
    });
    orders.value = []; // 清除现有订单数据
    uni.navigateTo({
      url: "/pages/login/index"
    })
    return;
  } else {
    first();
  }
});

// 获取订单状态文本
const getStatusText = (order) => {
  return order.status; 
};

// 获取订单商品总数量
const getTotalItems = (order) => {
  return order.products.reduce((total, product) => total + product.quantity, 0);
};

// 点击标签栏时更新状态的方法
const changeStatus = (status) => {
  currentStatus.value = status;
};

// 确认收货
const confirmreceipt = (order) => {
  uni.request({
    url: Config.API_HOST + "/order/" + order.id,
    method: 'PATCH',
    data: {
      status: '已完成',
      showConfirmButton: false
    },
    success: (res) => {
      first()
    }
  })
  // 隐藏按钮
};
</script>

<style scoped>
	.addressname{
		display: flex;
		align-items: center;
	}
	.name{
		margin-right:15px;
	}
.btn {
  border: 1px solid rgb(233, 59, 59);
    background-color: rgb(233, 59, 59);
    color: white;
    padding: 0px 20rpx; /* 调整按钮的内边距 */
    border-radius: 8rpx; /* 添加圆角 */
    display: inline-block;
}

.order-list-container {
  background-color: #f5f5f5;
  padding: 20rpx;
}

.tabs {
  display: flex;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #333;
}

.tab.active {
  color: #007AFF;
  border-bottom: 2rpx solid #007AFF;
}

.order-item {
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.shop-name {
  font-size: 32rpx;
  font-weight: bold;
}

.order-status {
  font-size: 28rpx;
  color: #999;
}

.order-products {
  padding: 20rpx 0;
}

.product {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  align-items: center;
}

.product:last-child {
  border-bottom: none;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.product-spec {
  font-size: 24rpx;
  color: #999;
}

.product-price {
  display: flex;
  align-items: center;
}

.price {
  font-size: 28rpx;
  color: #e93b3b;
}

.quantity {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.order-total {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.total-label {
  font-size: 24rpx;
  color: #999;
}

.total-price {
  font-size: 28rpx;
  color: #e93b3b;
  margin-left: 10rpx;
}

.order-actions {
  display: flex;
}

.empty-message {
  text-align: center;
  font-size: 32rpx;
  color: #999;
  padding: 100rpx 0;
}
</style>